<style>
  .reviews-total {
    font-size: 16px;
    font-weight: 300;
    text-align: center;
    color: #1d1f21;
  }

  .scoring-total {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 400;
    color: #1d1f21;
    margin-top: 10px;
  }

  .scoring-total span {
    margin-left: 14px;
  }

  .scoring-total svg {
    margin-right: 6px;
  }

 

    .comment-star-warp {
    position: relative;
    display: flex;
    align-items: center;
  }

  .comment-star-warp-choose {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  .comment-star-warp-choose svg {
    flex-shrink: 0;
  }

  .comment-list-warp{
    padding:80px 0 0 0;
  }

   @media screen and (min-width: 768px) and (max-width: 1024px) {
    .comment-list-warp{
    padding:30px 0 0 0;
  }
 
   }
   @media screen and (max-width: 767px) {
    .comment-list-warp{
    padding:20px 0 0 0;
  }
   }
   @media screen and (max-width: 1024px) {

  .comment_container {
    column-count: 1;
  }

}

 .comments_list .product {
    height: 180px;
    background: #f6f6f6;
    display: flex;
    margin-bottom: 30px;
  }

  .comments_list .product-comment {
    padding:0 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow:hidden;
  }


  .comments_list .product-comment .product-comment-total {
    font-size: 14px;
    font-weight: 300;
    color: #888888;
    margin-top: 16px;

  }
  .comments_list .product-comment .comment-product-title{
    font-size: 24px;
    font-weight: bold;
    color: var(--title_color);
    text-align: left;
  }

  .comments_list .product-comment-fraction {
    display: flex;
    align-items: center;
    margin-top: 10px;
  }

  .comments_list .product-comment-fraction svg {
    margin-right: 4px;
  }

  .comments_list .product-comment-fraction>svg:last-child {
    margin-right: 0;
  }

  .comments_list .product-comment-fraction span {
    font-weight: 500;
    color: var(--title_color);
    font-size: 24px;
    line-height: 24px;
    margin-left: 10px;
  }

  .comments_list .product-proportion {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 40px;
    flex-shrink: 0;
  }

  .comments_list .product-proportion-row {
    display: flex;
    align-items: center;
  }

  .comments_list .product-proportion-row+.product-proportion-row {
    margin-top: 6px;
  }

  .comments_list .product-proportion-fraction {
    width: 160px;
    height: 10px;
    background: #dddddd;
    margin: 0 4px;
    position: relative;
  }

  .comments_list .product-comment-total-progress {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: #BBBBBB;
    z-index: 10;
  }

  .comments_list .product-proportion-number {
    font-weight: 300;
    color: #1d1f21;
    font-size: 14px;
  }

 


  .comments_list .comment-star-warp {
    position: relative;
    display: flex;
    align-items: center;
  }

  .comments_list .comment-star-warp-choose {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  .comments_list .comment-star-warp-choose svg {
    flex-shrink: 0;
  }


  @media screen and (min-width: 768px) and (max-width: 1024px) {
    .comments_list .product {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #fff;
      padding-bottom:30px;
      margin-bottom: 0;
    }

    .comments_list .product .product-images {
      width: 100%;
      height: auto;
    }

    .comments_list .product .product-images img {
      width: 100%;
      height: auto;
    }

    .comments_list .product .product-comment {
      margin-left: 0;
      margin-top: 30px;
      display: flex;
      flex-direction: column;
      align-items: center;

    }

    .comments_list .product .product-proportion {
      margin-left: 0;
      width: 100%;
      align-items: center;
      margin-top: 30px;
      padding: 0;
    }

    .comments_list .comment_container {
      column-count: 1;
    }

    .comments_list .product-comment .comment-product-title{
      text-align: center;
    }
  }
  @media screen and (max-width: 767px){
    .comments_list .product {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #fff;
        padding-bottom:15px;
      margin-bottom: 0;
    }

    .comments_list .product .product-images {
      width: 100%;
      height: auto;
    }

    .comments_list .product-comment .comment-product-title{
      text-align: center;
    }

    .comments_list .product .product-images img {
      width: 100%;
      height: auto;
    }

    .comments_list .product .product-comment {
      margin-left: 0;
      margin-top: 15px;
      display: flex;
      flex-direction: column;
      align-items: center;

    }
    .comments_list .product-comment .product-comment-total{
      margin-top: 10px;
    }

    .comments_list .product .product-proportion {
      margin-left: 0;
      margin-top: 15px;
      padding: 0;
    }
    .comments_list .comments_detail-comment-wrap{
      margin-top: 15px;
    }

    .comments_list .comment_container {
      column-count: 1;
    }
  }
</style>
<div class="comments_list container_wrapper" id="comments_list">
  <h1 class="title">{{lang.comments.title}}</h1>

  {% comment %} <div class="reviews-total">{{lang.comments.reviews}}({{all_comment.statistics.count}})</div> {% endcomment %}

  <div class="product">
    <div class="product-comment">
      <a class="comment-product-title line-clamp2">{{storeConfig.name | upcase}}</a>
      <div class="product-comment-fraction">
        <div class="comment-star-warp">
          {% assign score_uncheck_color = theme_config.global.product_score_uncheck_color | default:'#bbbbbb' %}
          {% assign score_selected_color = theme_config.global.product_score_selected_color | default:'#F8AD6B' %}
          {% for index in (1..5) %}
          {% include icon_block_star , width:"24",height:"24",color: score_uncheck_color %}
          {% endfor %}
          {% assign star = 0 %}
          {% if  all_comment.statistics.star %}  {% assign star = all_comment.statistics.star | divided_by: 5 | times:100 %} {% endif %}
          <div class="comment-star-warp-choose" style="width:{{star}}%">
            {% for index in (1..5) %}
            {% include icon_block_star , width:"24",height:"24",color: score_selected_color %}
            {% endfor %}
          </div>
        </div>
        <span>{{all_comment.statistics.star}}</span>
      </div>
    </div>
    <div class="product-proportion">
      <div class="product-proportion-row">
        <div class="product-proportion-star">
          {% for index in (1..5) %}
          <svg t="1632626527998" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7121" width="16" height="16">
            <path d="M512 0l122.88 352.96 389.12 2.752-300.8 238.08 118.272 380.032L512 747.392l-329.6 226.496L293.312 588.8 0.32 355.776l389.12-2.752z" fill="{{theme_config.global.product_score_selected_color | default:'#F8AD6B'}}" p-id="7122"></path>
          </svg>
          {% endfor %}
        </div>
        <div class="product-proportion-fraction">
        {% if  all_comment.statistics.star_list.fifth %}
          <div class="product-comment-total-progress" style="width:{{ all_comment.statistics.star_list.fifth | divided_by: all_comment.statistics.count | times: 100 }}%"></div>
        {% endif %}

        </div>
        <div class="product-proportion-number">（{{all_comment.statistics.star_list.fifth}}）</div>
      </div>
      <div class="product-proportion-row">
        <div class="product-proportion-star">
          {% for index in (1..5) %}
          {%- capture fill_color -%}
          {%- if index <= 4 -%}
            {{theme_config.global.product_score_selected_color | default:'#F8AD6B'}}
            {%- else -%}
            {{theme_config.global.product_score_uncheck_color | default:'#bbbbbb'}} 
          {%- endif -%}
          {%- endcapture -%}
          <svg t="1632626527998" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7121" width="16" height="16">
            <path d="M512 0l122.88 352.96 389.12 2.752-300.8 238.08 118.272 380.032L512 747.392l-329.6 226.496L293.312 588.8 0.32 355.776l389.12-2.752z" fill="{{fill_color}}" p-id="7122"></path>
          </svg>
          {% endfor %}
        </div>
        <div class="product-proportion-fraction">
         {% if  all_comment.statistics.star_list.fourth %}
                  <div class="product-comment-total-progress" style="width:{{ all_comment.statistics.star_list.fourth | divided_by: all_comment.statistics.count | times: 100 }}%"></div>
         {% endif %}

        </div>
        <div class="product-proportion-number">（{{all_comment.statistics.star_list.fourth}}）</div>
      </div>
      <div class="product-proportion-row">
        <div class="product-proportion-star">
          {% for index in (1..5) %}
          {%- capture fill_color -%}
          {%- if index <= 3 -%}
            {{theme_config.global.product_score_selected_color | default:'#F8AD6B'}}
            {%- else -%}
            {{theme_config.global.product_score_uncheck_color | default:'#bbbbbb'}} 
          {%- endif -%}
          {%- endcapture -%}
          <svg t="1632626527998" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7121" width="16" height="16">
            <path d="M512 0l122.88 352.96 389.12 2.752-300.8 238.08 118.272 380.032L512 747.392l-329.6 226.496L293.312 588.8 0.32 355.776l389.12-2.752z" fill="{{fill_color}}" p-id="7122"></path>
          </svg>
          {% endfor %}
        </div>
        <div class="product-proportion-fraction">
         {% if  all_comment.statistics.star_list.third %}
           <div class="product-comment-total-progress" style="width:{{ all_comment.statistics.star_list.third | divided_by: all_comment.statistics.count | times: 100 }}%"></div>
         {% endif %}

        </div>
        <div class="product-proportion-number">（{{all_comment.statistics.star_list.third}}）</div>
      </div>
      <div class="product-proportion-row">
        <div class="product-proportion-star">
          {% for index in (1..5) %}
          {%- capture fill_color -%}
          {%- if index <= 2 -%}
            {{theme_config.global.product_score_selected_color | default:'#F8AD6B'}}
            {%- else -%}
            {{theme_config.global.product_score_uncheck_color | default:'#bbbbbb'}} 
          {%- endif -%}
          {%- endcapture -%}
          <svg t="1632626527998" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7121" width="16" height="16">
            <path d="M512 0l122.88 352.96 389.12 2.752-300.8 238.08 118.272 380.032L512 747.392l-329.6 226.496L293.312 588.8 0.32 355.776l389.12-2.752z" fill="{{fill_color}}" p-id="7122"></path>
          </svg>
          {% endfor %}
        </div>
        <div class="product-proportion-fraction">
          {% if  all_comment.statistics.star_list.second %}
              <div class="product-comment-total-progress" style="width:{{ all_comment.statistics.star_list.second | divided_by: all_comment.statistics.count | times: 100 }}%"></div>
          {% endif %}
        </div>
        <div class="product-proportion-number">（{{all_comment.statistics.star_list.second}}）</div>
      </div>
      <div class="product-proportion-row">
        <div class="product-proportion-star">
          {% for index in (1..5) %}
          {%- capture fill_color -%}
          {%- if index <= 2 -%}
            {{theme_config.global.product_score_selected_color | default:'#F8AD6B'}}
            {%- else -%}
            {{theme_config.global.product_score_uncheck_color | default:'#bbbbbb'}} 
          {%- endif -%}
          {%- endcapture -%}
          <svg t="1632626527998" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7121" width="16" height="16">
            <path d="M512 0l122.88 352.96 389.12 2.752-300.8 238.08 118.272 380.032L512 747.392l-329.6 226.496L293.312 588.8 0.32 355.776l389.12-2.752z" fill="{{fill_color}}" p-id="7122"></path>
          </svg>
          {% endfor %}
        </div>
        <div class="product-proportion-fraction">
           {% if  all_comment.statistics.star_list.first %}
           <div class="product-comment-total-progress" style="width:{{ all_comment.statistics.star_list.first | divided_by: all_comment.statistics.count | times: 100 }}%"></div>
           {% endif %}

        </div>
        <div class="product-proportion-number">（{{all_comment.statistics.star_list.first}}）</div>
      </div>
    </div>
  </div>

  <div class="comment-list-warp">
    {% assign commentsLangth = all_comment.comments | size %}
    {% if commentsLangth %}
    <div id="comments_list-warp"></div>
    {% else %}
		{% include 'empty' ,{text:lang.comments.no_comments, icon:"comment" }%}
    {% endif %}
  </div>

  {% include pagination ,{ paginate : paginate } %}


</div>
{% include 'page_back_button',href:"" %}


{% include comment %}
<script>
  (function(){
    var comment = {{all_comment.comments|json}};
    const waterfall = new waterfalls({
        id: "#comments_list-warp",
        bottomDistance: 30,
        renderType: "liquid",
        renderComplete(node) {
          {% comment %} window.addLazyImages && addLazyImages(node.find("img[data-src]")); {% endcomment %}
          node.find('.comment_warp-images img').click(function () {
            const JqThis = $(this);
            const parentIndex = JqThis.data("parent");
            moi.pictureImages(comment[parentIndex].images.src, JqThis.data("index") - 1, JqThis)
          })
        },
        resizeConfig: [
          { min: 0, max: 1023, rowGutter: '20px', columnsGutter: '20px', columns: 1 },
          { min: 1024, rowGutter: '30px', columnsGutter: '30px', columns: 2 }
        ],
        render(data, callback) {
          engine.parseAndRender($("#omesaas-comment-temp-block").html(), {
            comments: data.map((item) => {
              item.price = formatMoney(item.price, oemcart_currency);
              item.created_at_str = moi.formatZoneDate(item.created_at, "YYYY-mm-dd");
              item.replied_at_str = moi.formatZoneDate(item.replied_at, "YYYY-mm-dd");
              return item;
            }),
            lang: lang,
            storeConfig: storeConfig,
            data_from:'{{data_from}}',
            is_product:true
          }).then(function (liquidHtml) {
            const node = $(liquidHtml);
            callback && callback.call(this, node)
          });

        }
    })
    if(comment.length){
      waterfall.addStorage(comment)
    }
    
  })()
  
</script>